<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品管理</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/search.css">
</head>
<body style="overflow-x:hidden;background:#f3f3f3;">
<div class="btn-div clearfix">
    <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demoModal-1">编辑</button>-->
    <div class="search-box">
        <form action="/goods/byKey">
            <input name="key" type="text" placeholder="请输入商品名称" maxlength="20" autocomplete="off">
            <input type="hidden" id="currPage" name="currPage"/>
            <button type="submit" class="btn btn-success">搜索</button>
        </form>
    </div>
</div>
<div>
    <table class="table table-condensed">
        <thead>
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>价格/元</th>
            <th class="operation">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="obj,i:${page.data}">
            <td th:text="${obj.sku}"></td>
            <td th:text="${obj.goodsName}"></td>
            <td th:text="${#numbers.formatDecimal(obj.goodsPrice,1,2)}"></td>
            <!--<td th:text="${obj.goodsPrice}"></td>-->
            <td class="operation">
                <button type="button" data-toggle="modal" th:id="${obj.id}" data-target="#demoModal"
                        class="btn btn-success btn-xs" th:onclick="|getData(${obj.id})|">编辑
                </button>
                <button type="button" data-toggle="modal" th:id="${obj.id}" data-target="#demoModal2"
                        class="btn btn-success btn-xs">同步
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>


<!-- 弹出框 -->
<!--新增弹出框-->
<div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加商品信息</h4>
            </div>
            <form class="form-horizontal add">
                <div class="modal-body">
                    <div class="form-group ">
                        <label for="firstname" class="col-sm-2 control-label">商品名称</label>
                        <div class="col-sm-10">
                            <input type="hidden" class="goodsid">
                            <input type="text" name="firstname" class="form-control" id="firstname" maxlength="25"
                                   placeholder="请输入商品名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="secondname" class="col-sm-2 control-label">商品价格</label>
                        <div class="col-sm-10">
                            <input type="text" name="secondname" class="form-control" id="secondname"
                                   placeholder="请输入商品价格">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button onclick="saveData()" type="button" class="btn btn-primary save" data-dismiss="modal"
                            id="save1">保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="demoModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel2">同步</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" class="goodsid">
                <span>确认是否同步？</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary save" data-dismiss="modal" id="confirmSyn"
                        th:onclick="'javascript:confirmSyn()'">确定
                </button>
            </div>
        </div>
    </div>
</div>

<div class="footer-pager">
    <span>共<span th:text="${page.totalPage}"></span>页，当前第<span th:text="${page.currPage}"></span>页</span>
    <ul class="pagination">
        <li><a th:if="${page.currPage}>1" th:href="'javascript:go('+${page.currPage-1}+');'">&laquo;</a></li>
        <!--<li class="active"><a href="#">1</a></li>
        <li class="disabled"><a href="#">2</a></li>-->
        <li><a th:if="${page.currPage-1}>0" th:href="'javascript:go('+${page.currPage-1}+');'"
               th:text="${page.currPage-1}"></a></li>
        <li><a th:href="'javascript:go('+${page.currPage}+');'" th:text="${page.currPage}"></a></li>
        <li><a th:if="${page.currPage+1}<${page.totalPage}" th:href="'javascript:go('+${page.currPage+1}+');'"
               th:text="${page.currPage+1}"></a></li>
        <li><a th:if="${page.currPage}<${page.totalPage}" th:href="'javascript:go('+${page.currPage+1}+');'">
            &raquo;</a>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="/js/goods/goods.js"></script>
<script th:inline="javascript">
    //分页
    function go(currPage) {
        //$('#currPage').val(currPage)
        if ([[${key}]] != null && [[${key}]] != 'null') {
            window.location.replace("/goods/byKey?currPage=" + currPage + "&key=" + [[${key}]])
        } else {
            window.location.replace("/goods/findAll?currPage=" + currPage)
        }

    }
</script>
</html>